<template>
	<view class="container">
		<view class="np-status" v-if="relationAuth">
			<text>您已完成授权</text>
		</view>
		<!-- #ifndef APP-PLUS -->
		<view class="np-box" v-if="!relationAuth">
			<view class="np-btn">
				<button @click="copyAuthUrl">复制链接</button>
			</view>
			<view class="np-text">
				<text>第一步：点击上方【复制链接】</text>
				<text>第二步：打开手机浏览器，网址栏粘贴打开</text>
				<text>第三步：输入帐号登录进行授权</text>
				<text class="np-tip">为什么要授权?</text>
				<text>
					只有进行渠道授权,才能获取到渠道关联ID与您的帐号绑定,如果没有进行授权,您下单的商品将无法返回订单信息。只有授权成功之后您才可以获取收益！
				</text>
			</view>
		</view>
		<view class="np-title" v-if="!relationAuth">
			<text>您未授权,目前您下单购买无法获得收益</text>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default {
		mixins: [base],
		data() {
			return {
				relationAuth: false,
				url: "",
				wechat: false,
				text: "",
				wechat_mod: '-1'
			}
		},
		onShow() {
			if (this.userInfo.relation_id) {
				this.relationAuth = true;
			} else {
				this.getAuth();
			}
		},
		methods: {
			getAuth() {
				this.$http.get('api/user/relation-auth').then((res) => {
					if (res.relation_id) {
						let userInfo = this.userInfo;
						userInfo.relation_id = res.relation_id;
						this.updateUserInfo(userInfo);
						this.relationAuth = true;
					} else {
						this.url = decodeURIComponent(res.url);
					}
				}).catch((err) => {
					this.$config.toast(err.message);
				});
			},
			copyAuthUrl() {
				if (!this.url) {
					uni.showModal({
						content: "获取授权链接失败，是否重试？",
						showCancel: true,
						confirmText: "重新获取",
						success: (res) => {
							if (res.confirm) {
								this.getAuth();
							}
						}
					});
					return;
				}
				uni.setClipboardData({
					data: this.url,
					success: (res) => {
						uni.showModal({
							title: "复制成功",
							content: "授权过程请不要关闭本页面！打开浏览器，在网址栏粘贴授权网址，授权成功后回到本页面将会自行检测授权状态。如关闭本页面，授权成功后需要重新登录！",
							showCancel: false
						});
					},
					fail: () => {
						this.$config.toast('复制失败');
					}
				});
			}

		}
	}
</script>

<style>
	.container {
		padding: 40rpx;
	}

	.np-status {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 500rpx;
	}

	.np-box {
		background: #e7e7e7;
		border-radius: 0 0 10rpx 10rpx;
	}

	button {
		color: #fff;
		background-color: #07c160;
		border-radius: 10rpx 10rpx 0 0;
	}

	.np-text {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #777777;
		padding: 20rpx;
		line-height: 40rpx;
	}

	.np-tip {
		font-size: 32rpx;
		color: #777777;
		font-weight: 500;
		padding: 20rpx 0;
		text-align: center;
	}

	.np-title {
		text-align: center;
		padding: 20rpx 0;
		margin-top: 50rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
		background: linear-gradient(45deg, #ff9700, #ed1c24);
	}
</style>
